import React, { useState, useEffect } from "react";
import { IconClose, IconPlus, IconArrowLeft, IconArrowRight } from 'artemis-icon'
import './StyleGrid.less'


export default React.memo(function ({ label, field, renderProps, children, onChange }) {
  const [ obj, setObject ] = useState<any>();

  useEffect(() => {
    if (renderProps[field]) {
      const __obj = Object.entries(renderProps[field]).map(([ key, value ]) => ({ key, value }))
      setObject([ ...__obj, { key: undefined, value: undefined } ])
    } else {
      setObject([{ key: undefined, value: undefined }])
    }
    // console.log(renderProps[field])
  }, [] as any)

  const __onChange = () => {
    setObject([ ...obj, { key: undefined, value: undefined } ]);
  }

  const updateValue = (obj) => {
    const __obj = obj.reduce((def, { key, value }) => {
      def[key] = value
      return def
    }, {});
    onChange(__obj, field);
  }

  const __onKeyChange = (value, index) => {
    const option = obj[index];
    option.key = value;
    obj[index] = option;
    setObject(obj);
    updateValue(obj);
  }

  const __onValueChange = (value, index) => {
    const option = obj[index];
    option.value = value;
    obj[index] = option;
    setObject(obj);
    updateValue(obj);
  }
  // console.log('---------------  renderProps  --------------', renderProps);

  return (
    <div className="form-item flex-col flex-center">
      <div className="form-item-label flex flex-align-start">
        <label>{ label }</label>
        <div className="form-item-action">
          <IconPlus className="action-icon action-add" onClick={__onChange}/>
        </div>
      </div>
      <div className="form-item-control">
        {
          obj && obj.map(({ key, value }, index) => {
            return (
              <div className="row form-item flex-center" key={index}>
                <div className="row form-item flex-center col-12">
                  <div className="col-10 form-item-label">
                    <label>名称：</label>
                  </div>
                  <div className="col-14 form-item-control">
                    <input
                      type="text"
                      className="cb-input"
                      defaultValue={key}
                      placeholder="请输入"
                      onChange={(ev) => __onKeyChange(ev.target.value, index)}
                    />
                  </div>
                </div>
                <div className="row form-item flex-center col-12">
                  <div className="col-8 form-item-label">
                    <label>值：</label>
                  </div>
                  <div className="col-16 form-item-control">
                    <input
                      type="text"
                      className="cb-input"
                      defaultValue={value}
                      placeholder="请输入"
                      onChange={(ev) => __onValueChange(ev.target.value, index)}
                    />
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
})